import React, { memo } from "react";
import { shallowEqual, useSelector, useDispatch } from "react-redux";

import "./index.scss";
import songActions from "store/action/songlist";

import WYThemeCover from "components/theme-cover";
import WYPagination from "components/pagination";

export default memo(function WYSongsList() {
  // redux
  const dispatch = useDispatch();
  const { songCatList, songCatParams, total } = useSelector(
    (state) => ({
      songCatList: state.getIn(["songlist", "songCatList"]),
      songCatParams: state.getIn(["songlist", "songCatParams"]),
      total: state.getIn(["songlist", "total"]),
    }),
    shallowEqual
  );

  const pageChange = (idx) => {
    dispatch(songActions.songChangeBy({ offset: idx, cat: songCatParams.cat }));
  };

  return (
    <div className="wy-songs-list">
      <div className="song-cat-list">
        {songCatList.length > 0 &&
          songCatList.map((item, index) => (
            <WYThemeCover key={index} info={item} />
          ))}
      </div>

      <WYPagination
        total={total}
        currentPage={songCatParams && songCatParams.offset}
        onPageChange={pageChange}
      />
    </div>
  );
});
